<template>
      <div>
            <div class="col-xs-12" v-for="(item,index) in prodObj.value" :key="index">
                  <div class="input-group">
                        <input type="text" class="form-control input-sm" :style="{backgroundColor:returnColor(index)}" :placeholder="inputNameBak[index]" @change="groupName($event,index)">
                        <span class="input-group-btn">
                              <input class="btn btn-default btn-sm" type="button" style="width:100px;" @click="showProd(index)" 
                              v-model="buttonValueArray[index]"/>
                        </span>
                  </div> 
            </div>
      </div>
</template>
<script>
import prod from 'prod';
export default {
      name:'prodComponent',
      props:{
            prodObj:{
                  type:Object,
                  default:function(){
                        return {value:new Array(1),name:['グループA']};
                  },
                  validator:function(value){
                        if(value.value === undefined || value.value.length === 0){
                              value.value = new Array(1);
                        }
                        return value;
                  }
            },
            company:{
                  type:String
            },
            mast:{
                  type:Object
            }
      },
      data:function(){
            return {
                  prod:new prod(window.$),
                  showModuleIndex:0,
                  buttonValueArray:new Array(),
                  buttonColor:new Array(),
                  inputNameBak:[]
            };
      },
      watch:{
            'mast.type'(){
                  this.prod.init(this.setInitProdModuleOfParam());
            },
            'mast.value'(){
                  this.prod.init(this.setInitProdModuleOfParam());
            }
      },
      methods:{
            showProd(index){
                  this.showModuleIndex = index;
                  this.prod.setProds(this.prodObj.value[index] === undefined ? []:this.prodObj.value[index]);
                  this.prod.show();     
            },
            checkCompanyNotNull(){
                  if(this.prodObj.company !== undefined &&
                        this.prodObj.company !== '' && 
                        this.prodObj.company !== null ){
                        return true;
                  }else{
                        return false;
                  }
            },
            setInitProdModuleOfParam(){
                  var vm = this;
                  var param = {
                        usercd:global.userCd,
                        elementId: 'prod',
                        level: 'l-m-s-t',
                        sakeflg:'0',
                        mstclass: this.mastClass
                  };
                  if(this.mast.type === 'suntory'){
                        param.kigyoucd = global.suntoryCd;
                  }else{
                        param.kigyoucd = this.company;
                  }
                  param.callback={
                        afterSelectedOK:function(){
                              vm.prodObj.value[vm.showModuleIndex] = vm.prod.getProds();
                              if(vm.prod.getProds().length > 0 ){
                                    vm.buttonValueArray.splice(vm.showModuleIndex,1,'選択済み');
                                    vm.buttonColor.splice(vm.showModuleIndex,1,'#BBFFFF');
                              }else{
                                    vm.buttonValueArray.splice(vm.showModuleIndex,1,'商品選択');
                                    vm.buttonColor.splice(vm.showModuleIndex,1,'');
                              }
                        }
                  };
                  return param;
            },
            initButtonValue(){
                  for (var index = 0; index < this.prodObj.value.length; index++) {
                        if(this.prodObj.value[index] === undefined || this.prodObj.value[index].length === 0 ){
                              this.buttonValueArray.push('商品選択');
                              this.buttonColor.push('');
                        }
                  }
            },
            groupName(that,index){
                  var value = that.target.value;
                  value === '' ? this.prodObj.name[index] = this.inputNameBak[index] :this.prodObj.name[index] = value;
            }
      },
      computed:{
            returnColor(){
                  var vm = this;
                  return function(index){
                        return vm.buttonColor[index];
                  };
            }
      },
      mounted(){
            var vm = this;
            this.initButtonValue();
            var initInterval = setInterval(function(){
                  if( vm.company !== '' && vm.mast !== undefined && vm.mast.companyType !== ''){
                        vm.prod.init(vm.setInitProdModuleOfParam());
                        clearInterval(initInterval);
                  }
            },300);
            this.inputNameBak = this.prodObj.name.concat();
      }
};
</script>

<style scoped>

</style>